import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { useRef } from 'react';
import { list } from '@/services/ant-design-pro/api';
import { Image } from 'antd';

export const waitTimePromise = async (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

const columns: ProColumns<API.CurrentUser>[] = [
  {
    dataIndex: 'id',
    valueType: 'indexBorder',
    width: 48,
    search: false,
  },
  {
    title: '头像',
    dataIndex: 'avatarUrl',
    render: (_, record) => (
      <div>
        <Image src={record.avatarUrl} width={70} height={70} />
      </div>
    ),
    search: false,
  },
  {
    title: '昵称',
    dataIndex: 'userName',
    copyable: true,
  },
  {
    title: '账号',
    dataIndex: 'userAccount',
    copyable: true,
  },
  {
    title: '性别',
    dataIndex: 'gender',
    valueEnum: {
      0: {
        text: '男',
        status: 'Success',
        disabled: true,
      },
      1: {
        text: '女',
        status: 'Error',
        disabled: true,
      },
      2: {
        text: '保密',
        status: 'Error',
        disabled: true,
      },
    },
    search: false,
  },
  {
    title: '电话',
    dataIndex: 'phone',
    copyable: true,
    search: false,
  },
  {
    title: '邮箱',
    dataIndex: 'email',
    copyable: true,
    search: false,
  },
  {
    title: '微信号',
    dataIndex: 'wxAccount',
    copyable: true,
    search: false,
  },
  {
    title: 'qq号',
    dataIndex: 'qqAccount',
    copyable: true,
    search: false,
  },
  {
    title: '角色',
    dataIndex: 'userRole',
    valueEnum: {
      0: {
        text: '普通用户',
        status: 'Success',
        disabled: true,
      },
      1: {
        text: '管理员',
        status: 'Processing',
        disabled: true,
      },
    },
    search: false,
  },
  {
    title: '状态',
    dataIndex: 'userStatus',
    valueEnum: {
      0: {
        text: '正常',
        status: 'Success',
        disabled: true,
      },
      1: {
        text: '封号',
        status: 'Error',
        disabled: true,
      },
    },
    search: false,
  },
  {
    title: '注册时间',
    key: 'createTime',
    dataIndex: 'createTime',
    valueType: 'dateTime',
    search: false,
  },
  {
    title: '修改时间',
    key: 'updateTime',
    dataIndex: 'updateTime',
    valueType: 'dateTime',
    search: false,
  },
];

export default () => {
  const actionRef = useRef<ActionType>();
  return (
    <ProTable<API.CurrentUser>
      columns={columns}
      actionRef={actionRef}
      cardBordered
      request={async (params: API.ListUserParams & { current?: number; pageSize?: number }) => {
        // 将 current 参数转换为 pageNum 参数
        const { current, pageSize, ...rest } = params;
        const newParams = {
          pageNum: current, // 这里将 current 转为 pageNum
          pageSize,
          ...rest,
        };
        const userList = await list(newParams);
        return {
          data: userList.data,
          total: userList.total,
        };
      }}
      editable={{
        type: 'multiple',
      }}
      columnsState={{
        persistenceKey: 'pro-table-singe-demos',
        persistenceType: 'localStorage',
        defaultValue: {
          option: { fixed: 'right', disable: true },
        },
        onChange(value) {
          console.log('value: ', value);
        },
      }}
      rowKey="id"
      search={{
        labelWidth: 'auto',
      }}
      options={{
        setting: {
          // @ts-ignore
          listsHeight: 400,
        },
      }}
      form={{
        // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
        syncToUrl: (values, type) => {
          if (type === 'get') {
            return {
              ...values,
              created_at: [values.startTime, values.endTime],
            };
          }
          return values;
        },
      }}
      pagination={{
        pageSize: 10,
        current: 1,
      }}
      dateFormatter="string"
    />
  );
};
